<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <link rel="stylesheet" href="__HOME__/css/weui.css">
    <link rel="stylesheet" href="__HOME__/css/jquery-weui.css">
    <link rel="stylesheet" href="__HOME__/css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_689900_q7w1lloaqzg2e29.css">

    <script src="__HOME__/js/vue.js"></script>
    <style>
        .weui-cell:before {
            border-top: 0px solid #e5e5e5;
        }
        input::-webkit-input-placeholder {
            /* placeholder字体大小  */
            font-size: 14px;
            color: #959595;
        }
    </style>
</head>
<body class="back1" >
<div class="index-top-fix">
    <a href="{:url('/store/parent.vote/join_detail')}?shop_id={$shop_id}" class="iconfont icon-left- left"></a>
    <p class="title">参赛报名</p>
</div>


<div style="margin-top: 50px"  id="app" >
    <form method="post" action=" " id="box" enctype="multipart/form-data">
    <div class="weui-cells__title">真实姓名</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="name" value=""  placeholder="请输入真实姓名">
            </div>
        </div>
    </div>
    <div class="weui-cells__title">年龄</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="age" value=""  placeholder="请输入您孩子的年龄">
            </div>
        </div>
    </div>
    <div class="weui-cells__title">电话</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" id="tel" value=""  placeholder="请输入您的手机号码">
            </div>
        </div>
    </div>
    <div class="weui-cells__title">性别</div>
    <div class="weui-cells weui-cells_radio">
        <label class="weui-cell weui-check__label" >
            <div class="weui-cell__bd">
                <p style="font-size: 14px">男</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="radio1" value="1" >
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" >
            <div class="weui-cell__bd">
                <p  style="font-size: 14px">女</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" name="radio1" class="weui-check"  value="2"  checked="checked">
                <span class="weui-icon-checked"></span>
            </div>
        </label>

    </div>
        <!--图片上传-->
        <div class="weui-cell" style="margin-top: 8px;background-color: #fff;">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传</p>
                        <div class="weui-uploader__info">0/2</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                            <li  class="weui-uploader__file" v-for="(item, index) in pictures" >
                                <img :src="item.url" @touchstart="gtouchstart(index)" :id="index" style="width: 100%;height: 100%">
                            </li>
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="button">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="weui-btn-area">
        <input type="hidden" id="act_id" value="{$act_id}">
        <a class="weui-btn weui-btn_primary" onclick="add()" style="background-color: #0bb20c">确定</a>
    </div>
    </form>
</div>
<script src="__HOME__/js/jquery.min.js"></script>
<script src="__HOME__/js/jquery-weui.min.js"></script>
<script src="__HOME__/js/swiper.min.js"></script>
<script src="__HOME__/js/jweixin-1.2.0.js"></script>
<script src="__HOME__/js/jquery-weui.min.js"></script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            post_img: [],
            pictures: [
                // {
                //     url: '',
                //     src: ''
                // }
            ]

        },
        methods: {
            //开始按
            gtouchstart:function gtouchstart(item){
                console.log(app.pictures);
                timeOutEvent = setTimeout(function(){
                    app.longPress(item)
                },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改
                return false;
            },

            //真正长按后应该执行的内容
            longPress:function longPress(item){
                timeOutEvent = 0;
                //执行长按要执行的内容，如弹出菜单
                $.confirm("确定删除吗？", function() {
                    app.pictures.splice(item,1);
                }, function() {
                    //点击取消后的回调函数
                });
            }

        }


    });

    wx.config({
        debug: false,
        appId: '{$jsconfig.appId}',
        timestamp: '{$jsconfig.timestamp}',
        nonceStr: '{$jsconfig.noncestr}',
        signature: '{$jsconfig.signature}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
    wx.isInit = false;

    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: [
                'getNetworkType',
                'previewImage',
            ],
            success: function (res) {
            }
        });

        var images = {
            localId: [],
            serverId: []
        };

        $('#uploaderInput').click(function () {
            wx.chooseImage({
                success: function (res_1) {
                    images.localId = res_1.localIds;
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res_2) {
                                i++;
                                $.post(
                                    "{:url('store/api/tempfile2')}",
                                    {
                                        mid: res_2.serverId,
                                        shop_id: {$shop_id},
                                    },
                                    function (ret) {
                                        if(ret.code===1){
                                            app.pictures.push(
                                                {
                                                    url: ret.data.url,
                                                    src: ret.data.src
                                                }
                                            );
                                            app.post_img.push(ret.data.src);
                                        }
                                    }
                                );
                                images.serverId.push(res_2.serverId);
                                if (i < length) {
                                    upload();
                                } else {
                                    //全部上传完成时
                                }
                            },
                            fail: function (res_3) {
                            }
                        });
                    }
                    upload();
                }
            });
        });

    });

    wx.error(function (res) {
//        alert(res.errMsg);
    });

    function add(){
        var pic_url = app.post_img;
        var act_id = $("#act_id").val();
        var name = $('#name').val();
        var age  = $('#age').val();
        var tel  = $('#tel').val();
        var sex  = $("input[name='radio1']:checked").val();

        // 姓名不可为空
        if(name === '' || name === "undefined"){
            alert('参赛者姓名不能为空呦~');
            $("#name").focus();
            return;
        }
        // 电话不可为空
        if(tel === '' || tel === "undefined"){
            alert('电话不能为空呦~');
            $("#tel").focus();
            return;
        }
        // 年龄不可为空
        if(age === '' || age === "undefined"){
            alert('年龄不能为空呦~');
            $("#age").focus();
            return;
        }

        // 图片不可为空
        if(pic_url === '' || pic_url === "undefined"){
            alert('图片不能为空呦~');
            return;
        }

        // 图片不可为空
        if(pic_url.length>3){
            alert('图片最多只能上传两张~');
            return;
        }
        $.ajax({
            type: 'post',
            url: '{:url("add")}',
            dataType: 'JSON',
            data: {
                pic_url:pic_url,
                name:name,
                age:age,
                tel:tel,
                sex:sex,
                act_id:act_id
            },

            success: function (res) {
                if (res.code == 1) {
                    $.toast(res.msg, function () {
                        location.href = "{:url('/store/parent.vote/join_detail')}?act_id={$act_id}&shop_id={$shop_id}";
                    });
                } else {
                    $.toast(res.msg ,function () {
                    })
                }
            }
        })
    }



</script>
</body>
</html>

